前言

在前面介紹了 destructuring assignment 語法，使得存取陣列更加方便，而除了 destructuring assignment 之外，ES6 還引入同樣可以存取陣列的語法 rest/spread operator，讓我們來看看吧！

rest operator(其餘運算子)

rest operator 經常會和 destructuring assignment 搭配使用，我們重新複習一下 destructurig assignment 的使用方式：

const languages = ['JavaScript', 'Python', 'Ruby', 'Java', 'Swift'];

const [js, py, rb] = languages;
// js 為 'JavaScript'
// py 為 'Python'
// rb 為 'Ruby'

透過 destructuring assignment 可以取得陣列中變數對應位置的元素，其餘的元素就會被忽略掉，若我們仍希望取得其餘的元素，就可以利用其餘運算子(...)：

const languages = ['JavaScript', 'Python', 'Ruby', 'Java', 'C++'];

const [js, py, rb, ...otherLanguages] = languages;
// js 為 'JavaScript'
// py 為 'Python'
// rb 為 'Ruby'
// otherLanguages 為 ['Java', 'Swift']

以上例子中，我們多宣告一個變數 otherLanguages 放在最後一個位置，然後在前面加上 ...，如此一來其餘的元素就會組成一個新的陣列並且賦值給該變數。

要特別注意：其餘運算子只能放在最後一個位置，不然會出現錯誤：

const languages = ['JavaScript', 'Python', 'Ruby', 'Java', 'C++'];

const [...otherLanguages, cpp] = languages;  // SyntaxError: Rest element must be last element

使用 rest operator 來複製陣列

我們可以利用 rest operator 的特性來複製陣列：

const languages = ['JavaScript', 'Python', 'Ruby', 'Java', 'Swift'];

const [...newLanguages] = languages;
// newLanguages 同為 ['JavaScript', 'Python', 'Ruby', 'Java', 'Swift']

相當於將 languages 中的所有元素重新組成一個新的陣列賦值給 newLanguages。

spread operator(展開運算子)

另外一個經常和 destructuring assignment 搭配使用的就是展開運算子(...)，我們直接來看看使用方式：

const someTools = ['TypeScript', 'Storybook'];

const tools1 = ['ESLint', 'Babel', ...someTools];
const tools2 = ['ESLint', ...someTools, 'Babel'];

// tools1 為 ['ESLint', 'Babel', 'TypeScript', 'Storybook']
// tools2 為 ['ESLint', 'TypeScript', 'Storybook', 'Babel']

以上例子中，我們在變數 someTools 前面加上 ... 就能將陣列中的元素展開放到另外一個陣列裡面。而展開運算子並不像其餘運算子一樣必須放在最後一個位置，它可以放在任何位置。

使用 spread operator 來複製陣列

我們同樣可以利用 spread operator 的特性來複製陣列：

const tools = ['ESLint', 'Babel', 'TypeScript', 'Storybook'];

const newTools = [...tools];
// newTools 同為 ['ESLint', 'Babel', 'TypeScript', 'Storybook']

使用 spread operator 來串接陣列

我們還可以利用 spread operator 的特性來串接陣列：

const tools1 = ['ESLint', 'Babel'];
const tools2 = ['TypeScript', 'Storybook'];

const allTools = [...tools1, ...tools2];
// allTools 為 ['ESLint', 'Babel', 'TypeScript', 'Storybook']

總結

rest/spread operator 搭配 destructuring assignment 讓開發者在存取陣列時，能夠取得其餘的元素或是將陣列展開，既然能夠用在處理陣列上，當然也能夠拿來處理物件，下一篇文章就會接著介紹如何應用 rest/spread operator 於物件囉！